import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:imperius_insights/portal/state/mobx/widget-state.dart';
import 'package:imperius_insights/portal/widgets/responsive-widget.dart';
import 'package:imperius_insights/treaty/dimensions.dart';
import 'package:imperius_insights/treaty/palette.dart';
import 'package:imperius_insights/treaty/strings.dart';
import 'package:imperius_insights/treaty/styles.dart';

import 'view_model.dart';

class Screen extends StatefulWidget {
  Screen();

  @override
  State<StatefulWidget> createState() {
    return ToolboxScreenState();
  }
}

class ToolboxScreenState extends MobXWidgetState<Screen, ViewModel> {
  @override
  ViewModel createStore() {
    return ViewModel();
  }

  ToolboxScreenState();

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        PreferredSize(
          preferredSize: Size.fromHeight(50.0),
          child: AppBar(
            elevation: 4,
            centerTitle: true,
            title: Text(
              Strings.home_tab_toolbox,
            ),
            backgroundColor: palette.theme,
          ),
        ),
        Expanded(
          child: Container(
            color: palette.pageBackground,
            child: GridView.count(
              padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
              crossAxisCount: ResponsiveWidget.isLandscape(context) ? 6 : 3,
              childAspectRatio: 1,
              children: buildUnits(),
            ),
          ),
        ),
        Container(
            padding: EdgeInsets.symmetric(vertical: 3),
            child: Center(
              child: Observer(
                builder: (_) =>
                    Text(viewModel.versionText, style: styles.contentTipGray),
              ),
            ))
      ],
    );
  }

  List<Widget> buildUnits() {
    return this.viewModel.features.map((u) {
      if (u.customWidget != null) {
        return u.customWidget;
      }
      return Container(
        padding: EdgeInsets.all(5),
        child: Material(
            elevation: 2,
            borderRadius: BorderRadius.circular(layoutDimensions.radiusCard),
            shadowColor: Colors.grey,
            color: Colors.white,
            child: InkWell(
              onTap: () {
                viewModel.onClick(u);
              },
              child: Container(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(u.icon, size: 27, color: palette.theme),
                      Padding(padding: EdgeInsets.all(4)),
                      Text(
                        u.text,
                        style: styles.contentTip,
                      ),
                    ],
                  )),
            )),
      );
    }).toList(growable: false);
  }
}
